<template>
  <div class="employees content">
    <el-card>
      <Tools :noLeft="true">
        <template #right>
          <!-- 混入
          mixin:
            全局混入
               Vue.mixin(混入的js)
               混入的js{
                 没有html与css的组件
                 它有data,methods,有生命周期,有过滤器....
               }
               让每一个使用的组件与它混入生成一个新的组件使用,可以理解 与每个组件组合了一次,
               使用的组件就会有混入的所有东西,如果有同名的数据,当前组件会替换混入js的数据,生命周期,先执行混入组件再执行当前组件
            局部混入
              mixins:[混入的js]
          
           -->
          <!-- <el-button
            v-if="userInfo.roles.points.includes('employees_import_button')"
            type="primary"
            size="small"
            @click="uploadClick"
            >导入</el-button
          > -->
          <el-button
            v-if="buttonControl('employees_import_button')"
            type="primary"
            size="small"
            @click="uploadClick"
            >导入</el-button
          >
          <!-- 
          {
            import:'导入'
          }
          {
            import:'import'
          }

          模块名:{
            当前组件名:{
              key:'导入'
            }
          }
          模块名:{
            当前组件名:{
              key:'导入'
            }
          }

         -->

          <el-button type="primary" size="small" @click="addUser"
            >+新增员工</el-button
          >
          <!-- 新增
              1:绑定新增按钮事件
              2:创建一个新增的弹框组件(基本结构组件)
              3:在用户组件中引入 使用(导入注册使用)
              4:在新增按钮事件中显示弹框组件
              5:完善内部的结构(表单结构)
              6:完成表单验证
              7:调用新增接口的处理
              -->
        </template>
      </Tools>
    </el-card>
    <el-card>
      <!-- 

        1:结构
        2:数据处理
           a:定义api
           b:导入与调用
           c:数据渲染
       -->
      <!-- table -->
      <!--correctionTime: "2018-11-30"
          departmentName: "总裁办"
          formOfEmployment: 1
          id: "604f764971f93f3ac8f365c2"
          mobile: "13800000002"
          password: "e10adc3949ba59abbe56e057f20f883e"
          staffPhoto: "http://q6cu3t6jv.bkt.clouddn.com/1063705989926227968?t=1616204161907"
          timeOfEntry: "2018-11-02"
          username: "管理员"
          workNumber: "9002"-->
      <el-table :data="list">
        <el-table-column label="序号" type="index">
          <template v-slot="{ $index }">
            <div>
              {{ (page.page - 1) * page.size + $index + 1 }}
            </div>
          </template>
        </el-table-column>
        <!-- 
           1:头像的html处理
           2:并不是很个用户都有正常的头像,如果没有正常头像需要使用自定义指令解决
         -->
        <el-table-column label="头像">
          <template v-slot="{ row }">
            <!-- {{ row.staffPhoto }} -->
            <!-- 点击头像生成头像地址对应的二维码 
            1:要有一个弹框组件  el-dialog
            2:点击打开弹框,同时生成二维码显示
               生成二维码  qrcode
               1:安装:  npm i qrcode
               2:导入  import Qrcode from 'qrcode'
               3:使用 
                   canvas  ref=canvas
                   Qrcode.toCanvas(dom,'地址',{width,height})
            
            -->
            <img
              v-imgError="$defaultUrl"
              class="avatar-img"
              :src="row.staffPhoto"
              alt=""
              @click="imgClick"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="姓名"
          prop="username"
          width="130px"
        ></el-table-column>
        <el-table-column label="手机号" prop="mobile"></el-table-column>
        <el-table-column label="工号" prop="workNumber"></el-table-column>
        <!-- <el-table-column
          label="聘用形式"
          prop="formOfEmployment"
          :formatter="formatterFormOf"
        ></el-table-column> -->
        <el-table-column label="聘用形式" prop="formOfEmployment">
          <template v-slot="{ row }">
            <div>
              {{ row.formOfEmployment | filterFormOf }}
            </div>
          </template>
        </el-table-column>
        <!-- 
          1:使用table自带的数据格式化方法:formatter
            el-table-column  :formatter="(row, column, cellValue, index)=>{
              row:当前行数据
              column:当前列
              cellValue:当前单元格(就是自己当前值)
              index:当前索引
            }"
          2:使用过滤器
            局部过滤器处理
              filters:{
                方法名(参数1,参数2){
                  return 转换后的值
                }
              }
              过滤器:v-bind与{{实参值1 | 方法名(实参值2)}}
           全局过滤器
          main.js  Vue.filter(过滤器的名字,(参数1,参数2)=>{return 转换后的值})
         -->
        <el-table-column label="部门" prop="departmentName"></el-table-column>
        <el-table-column label="入职时间" prop="timeOfEntry">
          <template v-slot="{ row }">
            <div>
              {{ row.timeOfEntry | filterTime }}
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="300px">
          <template v-slot="{ row }">
            <div>
              <!-- 
                1:创建一个详情页面组件
                2：配制路由
                3：点击查看跳转至相应页面
                4：完成基本布局
                5：通过调用接口获取该员工完整详情
                6：先实现用户名与密码修改
                     定义修改api
                     导入调用（在表单验证通过后调用）
                     调用成功：提示一下

               -->
              <el-button type="text" @click="lookClick(row.id)">查看</el-button>
              <el-button type="text">转正</el-button>
              <el-button type="text">调岗</el-button>
              <el-button type="text">离职</el-button>

              <!-- 角色分配:
1:弹框组件
   a:创建弹框组件
   b:点击角色显示弹框组件
2:弹框组件数据处理
  a:默认列表数据处理
  b:处理默认选中(通过用户id获取当前用户的角色进行选中)
  c:修改角色处理

 -->

              <el-button @click="setRole(row.id)" type="text">角色</el-button>
              <!-- 删除
                1:绑定删除事件
                2:在删除事件中加入确定弹框
                3:删除接口处理
                  a:删除api定义
                  b:导入删除api
                  c:在用户点击确定弹框确定后调用接口删除
                4:删除成功后处理
                  a:提示一下
                  b:刷新列表数据  



      
                 -->

              <el-button type="text" @click="del(row.id)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.page"
        :page-sizes="[1, 10, 100, 200, 300, 400]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </el-card>
    <!-- 新增弹框组件 -->
    <!-- v-model
       子组件标签  <xxx v-model="父组件属性名"  />
       子组件内:  props:['value/其它'],
                 model:{
                   prop:'value/其它',
                   event:'input/其它事件名'
                 }
                 this.$emit('input/a其它方法名',修改后的值)
    
     -->
    <add v-model="isShow" @refreshData="handleCurrentChange"></add>
    <!-- <upload :onSuccess="onSuccess" :beforeUpload="beforeUpload"></upload> -->

    <!-- 二维码 -->
    <el-dialog :visible.sync="showQrcode" title="二维码">
      <div style="text-align:center">
        <canvas ref="canvas"></canvas>
      </div>
    </el-dialog>
    <!-- 分配角色 -->
    <AssignRole :isShow.sync="show" ref="assignRole"></AssignRole>
  </div>
  <!-- 员工的上传组件要有的功能：
  上传图片等封装
    需求：
       a:实现上传与回显（可以传个地址让上传组件显示出来）
         1:创建一个上传公共组件（只定义基本结构 ）
         2:全局注册，
         3：随便找个地方测试上传组件显示
         4：完成上传功能与回显（v-model完成）功能       

       b:实现删除
        1:加入删除的html
        2：完成样式处理
        3：完成删除事件（让img标签对应的url的值为空，v-model对应的值为空）

       c:实现预览（点击弹框出大图片显示）  
         1：加入dialog用于显示大图片，设置好显示与隐藏对应值
         2:在dialog显示img对应的值用于显示大图片
         3：点击图片显示dialog
       d:进度条功能
         1：加入进度条的html(element-ui已提供相应组件)
         2：显示与隐藏  进度条的值  0%---100%
   -->
</template>
<script>
import { sysUser, sysUserDel } from '@/api/employees'
import employeesData from '@/utils/constant/employees'
import add from './components/add'
// import upload from './components/upload'
import Qrcode from 'qrcode'
import AssignRole from './components/assign-role.vue'
import { mapState } from 'vuex'
export default {
  components: {
    add,
    AssignRole
    // upload
  },
  computed: {
    ...mapState('user', ['userInfo'])
  },
  data () {
    return {
      show: false, // 角色分配弹框
      list: [],
      showQrcode: false, // 默认不显示二维码
      isShow: false, // 是否显示弹框组件
      page: {
        total: 10,
        page: 1, //是	1	页码
        size: 10 //是	10	每页条数
      }
    }
  },
  // filters: {
  //   filterFormOf (str) {
  //     const _index = employeesData.hireType.findIndex(item => {
  //       return item.id === str
  //     })
  //     return _index > -1 ? employeesData.hireType[_index].value : '--'
  //   }
  // },
  created () {
    this.getData()
  },
  methods: {
    async getData () {
      const res = await sysUser(this.page)
      this.list = res.rows
      this.page.total = res.total
      window.console.log('员工列表数据:', res)
    },
    // 页容量改变时触发
    handleSizeChange (size) {
      this.page.size = size
      this.page.page = 1
      this.getData()
    },
    // 页码改变
    handleCurrentChange (page) {
      this.page.page = page
      this.getData()
    },
    // 聘用 形式数据转换方法
    formatterFormOf (row, column, cellValue, index) {
      // window.console.log('formatter:', row, column, cellValue, index)
      // 返回值= 数组.find((item)=>{return boolean值 true  返回值=item})  如果所有return都是false,返回值就是undefined
      const _item = employeesData.hireType.find(item => {
        return item.id === cellValue
        // return false
      })
      return _item ? _item.value : '--'
    },
    // 删除事件

    del (id) {
      this.$confirm('您确定删除该用户吗?').then(async () => {
        await sysUserDel(id)
        this.$message.success('删除成功')
        this.page.page = 1
        this.getData()
      })
    },
    // 新增事件
    addUser () {
      this.isShow = true
    },
    // 导入按钮点击事件
    uploadClick () {
      this.$router.push('/employees/upload')
    },
    // onSuccess (obj) {
    //   window.console.log('excel数据:', obj)
    // },
    // beforeUpload (file) {
    //   // 限止 文件大小
    //   if (file.size / 1024 / 1024 > 2) {
    //     return true
    //   } else {
    //     this.$message.error('请上传2M以上文件')
    //     return false
    //   }
    // }
    lookClick (id) {
      this.$router.push('/employees/detail?id=' + id)
    },
    imgClick (e) {
      this.showQrcode = true
      // el-dialog它内容的渲染是在第一次打开弹框组件后才渲染的
      this.$nextTick(() => {
        Qrcode.toCanvas(this.$refs.canvas, e.target.src, {
          width: 300,
          height: 300
        })
      })
    },
    // 分配角色
    setRole (id) {
      this.show = true
      this.$refs.assignRole.getRoleInfo(id)
    }
  }
}
</script>
<style lang="scss" scoped>
.avatar-img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}
</style>
